<template lang="pug">
  div
    el-row
      el-tag(type="info").mr-2 行显示内容:
      el-button.float-right(@click="value.push({showExp:'',style:''})") 添加
    el-table(border :data="value")
      el-table-column(label="显示绑定值" width="120")
        template(slot-scope="scope")
          el-input(v-model="scope.row.showExp" :title="scope.row.showExp")
      el-table-column(label="样式" width="100")
        template(slot-scope="scope")
          el-button(size="mini" type="primary" @click="editStyle(scope.$index,scope.row.style)") 编写样式
      el-table-column(label="操作" width="200")
        template(slot-scope="scope")
          el-button.page-table-icon-btn(@click="value.splice(scope.$index,1)" size="mini" icon="el-icon-delete" title="删除")
          el-button.page-table-icon-btn(@click="prev(scope.$index)" size="mini" icon="el-icon-upload2" :disabled="scope.$index==0?true:false" title="上移")
          el-button.page-table-icon-btn(@click="next(scope.$index)" size="mini" icon="el-icon-download" :disabled="scope.$index==value.length-1?true:false" title="下移")
    el-dialog(title="样式编写" :visible.sync="styleDialogVisible" width="50%")
      .mt-2
        Monaco-editor(v-if="styleDialogVisible" v-model="rowStyle" :config="{'language':'css','btnHidden':true,'height':'500px'}" )
      .text-center(slot="footer")
        el-button(@click="dialogVisible = false") 取 消
        el-button(type="primary" @click="dialogSubmit") 确 定
</template>
<script>
import MonacoEditor from '../../../../../../../../common/components/myForm/formElements/monacoEditor'
import _ from 'lodash'

export default {
  props: ['value'],
  components: { MonacoEditor },
  data() {
    return {
      styleDialogVisible: false,
      index: '',
      rowStyle: ''
    }
  },
  methods: {
    prev(index) {
      var item = this.value[index]
      this.value[index] = this.value[Number(index - 1)]
      this.value[Number(index - 1)] = item
      this.$emit('input', [...this.value])
    },
    next(index) {
      var item = this.value[index]
      this.value[index] = this.value[Number(index + 1)]
      this.value[Number(index + 1)] = item
      this.$emit('input', [...this.value])
    },
    editStyle(index, style) {
      this.index = index
      this.rowStyle = _.cloneDeep(style)
      this.styleDialogVisible = true
    },
    dialogSubmit() {
      this.value[this.index].style = this.rowStyle
      this.styleDialogVisible = false
    }
  }
}
</script>
